@import "/old/css/css/coupon-common";

img {
  width: 100%;
  height: 100%;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg)
  }
  to {
    -webkit-transform: rotate(0deg)
  }
}

@keyframes rotate {
  from {
    transform: rotate(360deg)
  }
  to {
    transform: rotate(0deg)
  }
}
.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #87e9cd;
  .container {
    width: 100%;
    background: url(/old/images/lottery/background.png) no-repeat top;
    background-size: 100%;
    .header {
      width: 100%;
      padding: rem(24px) rem(36px) 0 rem(33px);
      min-height: rem(189.5px);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      .title-wrap {
        .title {
          width: rem(442px);
          min-height: rem(100px);
          float: right;
          border: rem(4px) solid #fff;
          border-right: 0;
          background-color: #01cdca;
          padding: 0 rem(77px) 0 0;
          img {
            padding: rem(10px) rem(18px);
            border-right: rem(4px) solid #fff;
          }
        }
        .time {
          font-size: rem(26px);
          color: #01cdca;
          text-align: right;
          clear: both;
          margin-right: rem(48px);
          padding: rem(6px);
        }
      }
      .input-wrap {
        width: rem(572px);
        height: rem(90px);
        border: rem(4px) solid #fff;
        background-color: #01cdca;
        margin: rem(20px) auto;
        @include displayflex;
        @include flexflowRow();
        span{
          display: block;
        }
        span:first-child{
          width: rem(440px);
          height: 100%;
          padding: rem(12px) rem(16px);
          border-right: rem(4px) solid #fff;
          input {
            display: block;
            outline: none;
            width: 100%;
            height: 100%;
            text-indent: rem(12px);
            border: none;
            @include border-radius(0px);
          }
        }
        span:last-child{
          @include flex(1);
          text-align: center;
          font-size: rem(44px);
          color: #fff;
          line-height: rem(82px);
          background-color: #ff5b5b;
          position: relative;
          &.disabled{
            background-color: #bdbdbd;
            color: white;
          }
          label{
            display: none;
            position: absolute;
            top: .5rem;
            left: 1rem;
            z-index: 1000;
            width: 1.3rem;
            height: 1.3rem;
            -webkit-animation: 1s linear 0s normal none infinite rotate;
            animation: 1s linear 0s normal none infinite rotate;
            background: url(/old/images/lottery/loading@2x.png) no-repeat center;
            background-size: contain;
          }
        }
        span:last-child.loading label{
            display: inline-block;
        }
      }
      .turntable-wrap {
        width: rem(501px);
        height: rem(507px);
        background: url(/old/images/lottery/turntable_bg.png) no-repeat center;
        background-size: 100%;
        margin: 0 auto;
        .turntable {
          width: rem(495.5px);
          height: rem(495.5px);
          position: relative;
          overflow: hidden;
          img.wheel {
            width: 100%;
            height: 100%;
            -webkit-transition: 4s ease-in-out;
            transition: 4s ease-in-out;
            &.rotates{
              -webkit-animation:1s linear 0s normal none infinite rotate;
              animation:1s linear 0s normal none infinite rotate;
            }
          }
          img.point {
            display: block;
            width: rem(208px);
            height: rem(166px);
            position: absolute;
            top: rem(160px);
            left: rem(148px);
            z-index: 1000;
          }
        }
      }
      .toUse {
        display: block;
        width: rem(312px);
        height: rem(118px);
        margin: rem(34px) auto 0;
      }
      .btns {
        width: 100%;
        height: rem(69px);
        overflow: hidden;
        padding: 0 rem(45px) 0 rem(56px);
        .btn {
          display: block;
          width: rem(160px);
          height: rem(69px);
          text-indent: -999px;
        }
        .btn:first-child {
          float: left;
          background: url(/old/images/lottery/btn-records.png) no-repeat center;
          background-size: contain;
        }
        .btn:last-child {
          float: right;
          background: url(/old/images/lottery/btn-rule.png) no-repeat center;
          background-size: contain;
        }
      }
      .action {
        width: rem(382px);
        height: rem(69px);
        display: block;
        margin: rem(60px) auto rem(34px);
        background: url(/old/images/lottery/btn-action.png) no-repeat center;
        background-size: contain;
        text-indent: -999px;
      }
    }
  }
}
a.jump{display:block;width:4.6rem;height:1.2rem;line-height:1.2rem;text-align: center;font-size:0.6rem;color:#fff;background-color:#E61E4B;border-radius: 4px;margin:0 auto;}
